Charts (WebWidget)

This web widget is used to create different types of charts, starting with pie charts, bar charts and complex line charts in a simple way.

Circle or ring diagrams visually represent the percentage ratios of the data to each other as segments of a circle or ring. The data components are marked in different colours or with deposited graphic patterns, so that the percentage ratios of the data can be seen at first glance. Background patterns are especially useful for people who are colour blind or for black and white printing.

A ring diagram could consist of several rings, each ring representing a further dimension of the data. For example, the percentage of a data set depending on the year in a two-year period could be represented as two nested rings, as the figure shows. Although nested circles can be used instead of nested rings, it has become established in practice that pie charts represent only a single set of data, while ring charts illustrate several comparable sets of data.

With the properties circumference and startAngle you can easily create a semicircle or semicircle diagram from a circle or ring diagram.

This WebWidget is so flexible that you can easily switch between the different variants by changing the corresponding parameter without having to write additional code.

Bar or column charts are used to illustrate the change in one or more discrete quantities over a variable (time span, categories, etc.) in a quantitative and comparable manner. The number of variables and their frequency should be kept small in order not to lose clarity, otherwise a line chart would be more suitable for representing larger data sets. If the quantitative data are not very relevant and only the percentage ratios should be shown, a pie chart is best.

It is possible to display bar charts horizontally, in which case some literature speaks of bar charts. For the sake of clarity, column and bar charts are referred to as bar charts in this article, regardless of their orientation.

Radar diagrams, also known as network diagrams, offer the possibility of displaying data on several star-shaped axes. The resulting graphs can be easily compared based on their shape, size and overlays. Therefore radar charts are often used for strategic decisions.

The Radar Chart WebWidget allows you to create radar charts in a very easy way, with a great freedom of display, from the background and border colours to the degree of curvature of the connecting lines.

Conventional line diagrams, also called curve diagrams, graphically represent a (functional) relationship between two characteristics.

If statistical data are available, the so-called scatter plots are best suited to investigate and illustrate the relationships between the statistical value pairs.

Bubble charts differ from scatter charts in that they are able to show three characteristics instead of only two. However, because the third characteristic is illustrated by the radius of a point, bubble charts cannot represent as many values as scatter charts.

InstantView is informed that a point/segment/bar (so-called data point) in the graph has been clicked. A data point is transferred as a DataPoint object, identified by its coordinates and the index of its data set.

Caution: The transposition of the data display does not affect the indexes and coordinates in the DataPoint object. This is useful for correctly associating the clicked data again.

If set to false, this message complements old data messages and does not overwrite them. By default, data messages overwrite the previous ones.

If redraw is set to false, the datasets are associated based on their order and the points in the datasets are composed. For example, to change only the second dataset in an update message, the first dataset must be listed as an empty object { }, { dataset 2 ...}, .... This is only necessary to preserve the order.

A two-dimensional array, each inner array representing an n-value tuple. The values can be either numeric or alphanumeric, depending on the axis definition. Time and date information is passed as formatted strings.

If a tuple consists of only one dimension, then it can be written as a loose number. Loose numbers are automatically added to tuples, where the first element in the tuple is the index starting with 1. This index then refers to the nth category in the case of a category axis.

If you do not want to specify any data points, but want the data points to be generated automatically from a function, you can specify this using a function object.

In this case, the points under points (if any) are combined with the generated points. The points under points overwrite the generated points.

Is set to allow deviations from a negative general redraw setting. This is useful for vertical lines in the line chart to allow multiple points in a dataset on an x-coordinate when the other datasets are only added. (the other datasets have redraw

This option determines whether the graph associated with this dataset should have a background colour. The default value is TRUE. Possible other values are:

• FALSE: no background colour
• The index of a dataset starts with 0: filling up to the dataset with the given index.

This option can take the following values:

• FALSE : Standard. It is interpolated normally without forming a staircase function.
• before' : forms a staircase function where the constant interpolation between two points (x, x+1) takes the value y(x).
• after' : forms a staircase function where the constant interpolation between two points (x, x+1) takes the value y(x+1).

A mathematical expression in the form "f(x) = 5*sin(x) + 3x + a". All functions and constants of the library math.js are allowed. ( List of all functions - List of all constants )

If expression contains constants, these must be defined as here. Example:

{ "a" : 15.6 }

The initial value of x with which the point generation starts. This can also be specified as a mathematical expression, e.g. "-2PI".

List of all constants

The final value of x, with which the point generation ends. This can also be specified as a mathematical expression, e.g. "2PI/2".

List of all constants

This WebWidget supports four types of axes: linear, logarithmic, temporal and category axes.

A category axis is useful if there can be no intermediate values between the coordinates and the order is not important. "Distribution costs" and "Personnel costs" are categories that do not form an ordered continuity, unlike 'October 2019' and 'December 2019', which may have an intermediate value of 'November 2019'. Tuples refer to the categories with the index of one category starting with 1. The tuple (2, 45) thus refers to the second category and has the value 45.

The linear, logarithmic, and temporal axes are recommended if the corresponding data are available and have the advantage over the category axis that no categories need to be defined, but rather a continuous numerical stream is defined, which allows intermediate values without rearranging "categories".

Possible values: linear, logarithmic, time, category

The value at which the axis should start regardless of the data limits.

This value is not taken into account in category axes.

The maximum value that the axis shows, regardless of the data limits. If this property is not explicitly specified, the maximum limit is determined dynamically using the data.

This value is not taken into account in category axes.

This property determines the size of the axis steps.

This value is not taken into account in time and category axes.

If defined, the time axis is divided in the specified unit.

Possible values: millisecond, second, minute, hour, day, week, month, quarter, year

The type of the diagram as string from the following set:

• Line chart: "line".
• Bar chart: "bar".
• Circular diagram: "pie
• bubblediagram: "bubble
• Scatter diagram: "scatter
• Radar diagram: "radar

The relative position of the legend. The following values are accepted:

top, down, right, left, hidden

The relative position of the title. The following values are accepted:

top, down, right, left